<template>
  <div class="live-content">
    <div class="live-card">
      <a-card size="small" class="card" :bordered="false" :hoverable="true">
        <div class="title">摄像头列表</div>
        <div class="list">
          <div
            class="item"
            v-for="item in cctvList"
            :key="item.configId"
            :class="{ 'item-active': selectList.findIndex((m) => m.configId === item.configId) >= 0 }"
            @click="selectItem(item)"
          >
            <VideoCameraOutlined />
            {{ item.cctvName }}
          </div>
        </div>
      </a-card>
    </div>
    <div class="live-windows">
      <a-card size="small" class="card" :bordered="false" :hoverable="true">
        <div class="cctv-frame">
          <div class="item" v-for="(t, index) in 9" :key="index">
            <div class="no-data" v-if="!selectList[index]">
              <!-- - 无信号 - -->
            </div>
            <div class="live" v-else>
              <jessibucaPlayer
                ref="jessibuca"
                :videoUrl="selectList[index].cctvUrl"
                :error="videoError"
                :message="videoError"
                :hasAudio="false"
                :domId="`buttonsBox_${index}`"
                fluent
                autoplay
                live
              />
            </div>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>
<script setup>
  import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
  import { iotApi } from '/@/api/plat/cctvConfig';
  import { login, playStart } from '/@/api/cctv/v1';
  import jessibucaPlayer from '/@/components/jessibuca/index.vue';
  import { localSave } from '/@/utils/local-util.js';
  import LocalStorageKeyConst from '/@/constants/local-storage-key-const.js';
  let intervalList = {};

  const cctvList = ref([]);
  const selectList = ref([]);
  const loading = ref(false);

  function videoError(e) {
    console.log('播放器错误：' + JSON.stringify(e));
  }

  function getCCTVList() {
    loading.value = true;
    iotApi.queryList().then(({ data }) => {
      cctvList.value = data;
      loading.value = false;
    });
  }

  function selectItem(row) {
    console.log('row: ', row);
    const index = selectList.value.findIndex((m) => m.configId === row.configId);
    if (index < 0) {
      selectList.value.push(row);
      // 判断是否心跳，有通道号就是需要
      if (row.channel) {
        playStart(row.channel).then(() => {});
        intervalList[row.channel] = setInterval(() => {
          playStart(row.channel).then(() => {});
        }, 15 * 1000);
      }
    }
  }

  function getToken() {
    login().then(({ token }) => {
      const cctvToken = 'Bearer ' + token;
      localSave(LocalStorageKeyConst.CCTV_TOKEN, cctvToken);
      getCCTVList();
    });
  }

  function initWeb() {
    getToken();
  }

  onMounted(initWeb);
</script>

<style scoped lang="less">
  .live-content {
    height: calc(100% - 20px);
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    .live-card {
      width: 200px;
      height: 100%;
      .title {
        font-size: 16px;
        font-weight: 700;
        padding-bottom: 10px;
        border-bottom: 1px solid #ddd;
        margin-bottom: 10px;
      }
      .list {
        .item {
          height: 25px;
          line-height: 25px;
          margin-bottom: 10px;
        }
        .item-active {
          color: #1677ff;
        }
      }
    }
    .live-windows {
      width: calc(100% - 200px - 20px);
      height: 100%;
      .cctv-frame {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(3, calc((100% - 30px) / 3));
        grid-template-rows: repeat(3, calc((100% - 30px) / 3));
        grid-column-gap: 15px;
        grid-row-gap: 15px;
        .item {
          background-color: #666;
          .no-data {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
          }
          .live {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .card {
    height: 100%;
  }
  ::v-deep .ant-card-body {
    height: 100%;
  }
</style>
